<!DOCTYPE html>
<html>
<head hexo-theme='https://volantis.js.org/#3.0-beta2'>
  <meta charset="utf-8">
  <!-- SEO相关 -->
  
    
  
  <!-- 渲染优化 -->
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="HandheldFriendly" content="True" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- 页面元数据 -->
  
  <title>HTTP 学习之旅 - 河豚吞吞</title>
  
    <meta name="keywords" content="HTTP">
  

  
    <meta name="description" content="We make our own luck.">
  

  <!-- feed -->
  

  <!-- import meta -->
  
    
      <meta name="msapplication-TileColor" content="#ffffff">
    
      <meta name="msapplication-config" content="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    
      <meta name="theme-color" content="#ffffff">
    
  

  <!-- link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css">
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">


  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css">

  

  

  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
  

  

  <!-- import link -->
  
  
  <link rel="apple-touch-icon" sizes="180x180" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/lemonElf/img/icon/icon001.png">
  <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
  <link rel="mask-icon" href="/lemonElf/img/icon/icon001.png" color="#5bbad5">
  <link rel="shortcut icon" href="/lemonElf/img/icon/icon001.png">
  

  
  
    
<link rel="stylesheet" href="/lemonelf/css/style.css">

  

  
  
</head>

<body>
  
  
  
  <div class="cover-wrapper">
    <cover class='cover post' style="display: none;">
      <div class='cover-body'>
  <div class='a'>
    
    
      <p class="title">MissGlobeFish</p>
    
    
      <p class="subtitle">When the world turns its back on you, you turn your back on the world! And only embrace whats next!</p>
    
  </div>
  <div class='b'>
    <div class='menu navigation dock'>
      <div class='list-h'>
        
          
            <a href="/lemonelf/"
              
              
              id="lemonelf">
              <img src='https://i.loli.net/2020/07/24/skczZ1VdMGRbTLi.png'><p>主页</p>
            </a>
          
            <a href="/lemonelf/archives/"
              
              
              id="lemonelfarchives">
              <img src='https://i.loli.net/2020/07/24/GaeXvVAdtJkCYT3.png'><p>归档</p>
            </a>
          
            <a href="/lemonelf/categories/"
              
              
              id="lemonelfcategories">
              <img src='https://i.loli.net/2020/07/24/9kHJZNA8m4RBxhp.png'><p>分类</p>
            </a>
          
            <a href="/lemonelf/friends/"
              
              
              id="lemonelffriends">
              <img src='https://i.loli.net/2020/07/24/cxRslyWzk2OTP9r.png'><p>友链</p>
            </a>
          
        
      </div>
    </div>
  </div>
</div>

      <div class="scroll-down" style="display: none;"><i class="fa fa-chevron-down scroll-down-effects"></i></div>
    </cover>
    <header class="l_header shadow blur">
  <div class='container'>
  <div class='wrapper'>
    <div class='nav-sub'>
      <p class="title"></p>
      <ul class='switcher nav-list-h' id="pjax-header-nav-list">
        <li><a class="s-comment fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
          <li><a class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
      </ul>
    </div>
		<div class="nav-main">
      
        
        <a class="title flat-box" target="_self" href='/lemonelf/'>
          
          
          
            MissGlobeFish
          
        </a>
      

			<div class='menu navigation'>
				<ul class='nav-list-h'>
          
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
          
				</ul>
			</div>

      <div class="m_search">
        <form name="searchform" class="form u-search-form">
          <i class="icon fas fa-search fa-fw"></i>
          <input type="text" class="input u-search-input" placeholder="Search..." />
        </form>
      </div>

			<ul class='switcher nav-list-h'>
				
					<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
				
				<li>
          <a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
          <ul class="menu-phone list-v navigation white-box">
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
            
          </ul>
        </li>
			</ul>
		</div>
	</div>
  </div>
</header>

  </div>
  


  <div class="l_body nocover">
    <div class='body-wrapper' id="pjax-container">
      
        <!--此文件用来存放一些不方便取值的变量-->
<!--思路大概是将值藏到重加载的区域内-->



<div id="pjax-data" style="display: none">
  <div id="pjax-ispage">true</div>
  <div id="pjax-pageTitle">HTTP 学习之旅</div>
  <div id="pjax-enable-cover">true</div>
  <div id="pjax-permalink">https://missglobefish.gitee.io/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/</div>
  
  <div id="valine-path">none</div>
  <div id="valine-placeholder">none</div>
  
  
</div>


<script>
  // 处理封面 此时 jquery 还没加载
  if ("none" == "none") { // 移除封面
    document.getElementsByClassName('cover')[0].style.display = "none";
    document.getElementsByClassName('l_body')[0].classList.add("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.add("show");
  } else {
    if ("none" == "blog") { // 半屏
      document.getElementsByClassName('cover')[0].classList.remove("full");
      document.getElementsByClassName('cover')[0].classList.add("half");
      document.getElementsByClassName('scroll-down')[0].style.display = "none";
    } else if ("none" == "docs") { // 全屏
      document.getElementsByClassName('cover')[0].classList.remove("half");
      document.getElementsByClassName('cover')[0].classList.add("full");
      document.getElementsByClassName('scroll-down')[0].style.display = "";
    }
    document.getElementsByClassName('cover')[0].style.display = "";
    document.getElementsByClassName('l_body', 'show')[0].classList.remove("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.remove("show");
  }
</script>

      
      

<div class='l_main'>
  

  
    <article id="post" class="post white-box reveal shadow article-type-post" itemscope itemprop="blogPost">
      


  <section class='meta'>
    
      
      
        <a title='HTTP 学习之旅' href='/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/'><img class='thumbnail' src='https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png'></a>
      
      <div class="meta" id="header-meta">
        
          
  <h1 class="title">
    <a href="/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/">
      HTTP 学习之旅
    </a>
  </h1>


        
        <div class='new-meta-box'>
          
            
          
            
              
<div class='new-meta-item author'>
  <a class='author' href="/" rel="nofollow">
    <img no-lazy src="https://pic4.zhimg.com/80/v2-52584915d42d676148e2c302f4e87382_hd.jpg">
    <p>MissGlobeFish</p>
  </a>
</div>

            
          
            
              
  
  <div class='new-meta-item category'>
    <a href='/lemonelf/categories/HTTP/' rel="nofollow">
      <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
      <p>HTTP</p>
    </a>
  </div>


            
          
            
              <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
    <p>发布于：2020-08-13</p>
  </a>
</div>

            
          
            
              

            
          
        </div>
        
          <hr>
        
      </div>
    
  </section>


      <section class="article typo">
        <div class="article-entry" itemprop="articleBody">
          
          
          <p>We make our own luck.</p>
<a id="more"></a>

<h2 id="1-HTTP-的前世今生"><a href="#1-HTTP-的前世今生" class="headerlink" title="1. HTTP 的前世今生"></a>1. HTTP 的前世今生</h2><p><code>小结：</code></p>
<ol>
<li>HTTP 协议始于三十年前蒂姆·伯纳斯 - 李的一篇论文；</li>
<li>HTTP/0.9 是个简单的文本协议，只能获取文本资源；</li>
<li>HTTP/1.0 确立了大部分现在使用的技术，但它不是正式标准；</li>
<li>HTTP/1.1 是目前互联网上使用最广泛的协议，功能也非常完善；</li>
<li>HTTP/2 基于 Google 的 SPDY 协议，注重性能改善，但还未普及；</li>
<li>HTTP/3 基于 Google 的 QUIC 协议，是将来的发展方向。</li>
</ol>
<h2 id="2-HTTP-是什么？"><a href="#2-HTTP-是什么？" class="headerlink" title="2. HTTP 是什么？"></a>2. HTTP 是什么？</h2><p>先看一下 <code>HTTP</code> 的名字： <code>超文本传输协议</code> ，它可以拆成三个部分，分别是：<code>超文本</code> <code>传输</code> 和 <code>协议</code>。<br>我们从后往前来逐个解析，理解了这三个词，我们也就明白了什么是 <code>HTTP</code>。</p>
<p><img src="/lemonElf/img/studyImg/http01.jpg" alt="http01"></p>
<p>A. 首先，HTTP 是一个“ 协议 ”。不过，协议又是什么呢？</p>
<ol>
<li>协议必须要有两个或多个参与者，也就是“ 协 ”。</li>
<li>协议是对参与者的一种行为约定和规范，也就是“ 议 ”。</li>
</ol>
<blockquote>
<p><strong>HTTP 是一个用在计算机世界里的协议。它使用计算机能够理解的语言确立了一种计算机之间交流通信的规范，以及相关的各种控制和错误处理方式。</strong></p>
</blockquote>
<p>B. 接下来我们看 HTTP 字面里的第二部分：“ 传输 ”。</p>
<ol>
<li>HTTP 协议是一个“ 双向协议 ”。</li>
<li>数据虽然是在 A 和 B 之间传输，但并没有限制只有 A 和 B 这两个角色，允许中间有“ 中转 ”或者“ 接力 ”。</li>
</ol>
<blockquote>
<p><strong>HTTP 是一个在计算机世界里专门用来在两点之间传输数据的约定和规范。</strong></p>
</blockquote>
<p>C. 接下来我们看 HTTP 字面里的第三部分：“ 超文本 ”。</p>
<ol>
<li>所谓“ 文本 ”（Text），就表示 HTTP 传输的不是 TCP/UDP 这些底层协议里被切分的杂乱无章的二进制包（datagram），而是完整的、有意义的数据，可以被浏览器、服务器这样的上层应用程序处理。</li>
<li>所谓“ 超文本 ”，就是“ 超越了普通文本的文本 ”，它是文字、图片、音频和视频等的混合体，最关键的是含有“ 超链接 ”，能够从一个“ 超文本 ”跳跃到另一个“ 超文本 ”，形成复杂的非线性、网状的结构关系。</li>
</ol>
<blockquote>
<p><strong>HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范</strong></p>
</blockquote>
<h6 id="HTTP-不是什么？"><a href="#HTTP-不是什么？" class="headerlink" title="HTTP 不是什么？"></a>HTTP 不是什么？</h6><ol>
<li>不存在“ 单独的实体 ”。</li>
<li>HTTP 不是互联网。</li>
<li>HTTP 不是编程语言。</li>
<li>HTTP 不是一个孤立的协议。</li>
</ol>
<p><code>小结：</code></p>
<ol>
<li>HTTP 是一个用在计算机世界里的协议，它确立了一种计算机之间交流通信的规范，以及相关的各种控制和错误处理方式。</li>
<li>HTTP 专门用来在两点之间传输数据，不能用于广播、寻址或路由。</li>
<li>HTTP 传输的是文字、图片、音频、视频等超文本数据。</li>
<li>HTTP 是构建互联网的重要基础技术，它没有实体，依赖许多其他的技术来实现，但同时许多技术也都依赖于它。</li>
</ol>
<h2 id="3-与HTTP相关的各种概念"><a href="#3-与HTTP相关的各种概念" class="headerlink" title="3. 与HTTP相关的各种概念"></a>3. 与HTTP相关的各种概念</h2><p><code>小结：</code></p>
<ol>
<li>互联网上绝大部分资源都使用 HTTP 协议传输；</li>
<li>浏览器是 HTTP 协议里的请求方，即 User Agent；</li>
<li>服务器是 HTTP 协议里的应答方，常用的有 Apache 和 Nginx；</li>
<li>CDN 位于浏览器和服务器之间，主要起到缓存加速的作用；</li>
<li>爬虫是另一类 User Agent，是自动访问网络资源的程序。</li>
</ol>
<h2 id="4-与HTTP相关的各种协议"><a href="#4-与HTTP相关的各种协议" class="headerlink" title="4. 与HTTP相关的各种协议"></a>4. 与HTTP相关的各种协议</h2><p><code>小结：</code></p>
<ol>
<li>TCP/IP 是网络世界最常用的协议，HTTP 通常运行在 TCP/IP 提供的可靠传输基础上；</li>
<li>DNS 域名是 IP 地址的等价替代，需要用域名解析实现到 IP 地址的映射；</li>
<li>URI 是用来标记互联网上资源的一个名字，由“协议名 + 主机名 + 路径”构成，俗称 URL；</li>
<li>HTTPS 相当于“HTTP+SSL/TLS+TCP/IP”，为 HTTP 套了一个安全的外壳；</li>
<li>代理是 HTTP 传输过程中的“中转站”，可以实现缓存加速、负载均衡等功能。</li>
</ol>
<p><code>总结：</code></p>
<ol>
<li>四层模型：应用层、传输层、网际层、链接层</li>
<li>IP协议主要解决寻址和路由问题</li>
<li>ipv4，地址是四个用“.”分隔的数字，总数有2^32个，大约42亿个可以分配的地址</li>
<li>ipv6，地址是八个用“:”分隔的数字，总数有2^128个。</li>
<li>TCP协议位于IP协议之上，基于IP协议提供可靠的(数据不丢失)、字节流(数据完整)形式的通信，是HTTP协议得以实现的基础</li>
<li>域名系统：为了更好的标记不同国家或组织的主机，域名被设计成了一个有层次的结构</li>
<li>域名用“.”分隔成多个单词，级别从左到右逐级升高。</li>
<li>域名解析：将域名做一个转换，映射到它的真实IP</li>
<li>URI：统一资源标识符；URL：统一资源定位符</li>
<li>URI主要有三个基本部分构成：协议名、主机名、路径</li>
<li>HTTPS：运行在SSL/TLS协议上的HTTP</li>
<li>SSL/TLS：建立在TCP/IP之上的负责加密通信的安全协议，是可靠的传输协议，可以被用作HTTP的下层</li>
<li>代理(Proxy)：是HTTP协议中请求方和应答方中间的一个环节。既可以转发客户端的请求，也可以转发服务器的应答。</li>
<li>代理常见种类：匿名台历、透明代理、正向代理、反向代理</li>
<li>代理可以做的事：负载均衡、内容缓存、安全防护、数据处理。</li>
</ol>
<h2 id="5-有层次的协议栈"><a href="#5-有层次的协议栈" class="headerlink" title="5. 有层次的协议栈"></a>5. 有层次的协议栈</h2><p><code>小结：</code></p>
<ol>
<li>TCP/IP 分为四层，核心是二层的 IP 和三层的 TCP，HTTP 在第四层；</li>
<li>OSI 分为七层，基本对应 TCP/IP，TCP 在第四层，HTTP 在第七层；</li>
<li>OSI 可以映射到 TCP/IP，但这期间一、五、六层消失了；</li>
<li>日常交流的时候我们通常使用 OSI 模型，用四层、七层等术语；</li>
<li>HTTP 利用 TCP/IP 协议栈逐层打包再拆包，实现了数据传输，但下面的细节并不可见。</li>
</ol>
<p>有一个辨别四层和七层比较好的（但不是绝对的）小窍门，“两个凡是”：凡是由操作系统负责处理的就是四层或四层以下，否则，凡是需要由应用程序（也就是你自己写代码）负责处理的就是七层。</p>
<p><code>总结：</code></p>
<ol>
<li>CP/IP协议是一个“有层次的协议栈”. </li>
<li>TCP/IP协议总共有四层，顺序从下往上 链接层-&gt;网际层-&gt;传输层-&gt;应用层</li>
<li>链接层 link layer ，负责在底层网络上发送原始数据包，使用MAC地址来标记网络上的设备，所以也叫MAC层</li>
<li>网际层 internet layer，IP协议所在层，在链接层的基础上，用IP地址取代MAC地址，把许多局域/广域网连接成虚拟的巨大网络，在这个网络里找设备时只要把IP地址再翻译成MAC地址就可以</li>
<li>传输层 transport layer，TCP、UDP协议所在层，这个层次协议的职责是保证数据在IP地址标记的两点之间可靠地传输。</li>
<li>TCP和UDP区别：<br> TCP 有状态 需要先建立连接才能发送数据 保证数据不丢失不重复 数据是连续的字节流，有先后顺序<br> UDP 无状态 不需要先建立连接也可以发送数据 不保证数据一定会发送到对方 数据是分散的小数据包，顺序发、乱序收</li>
<li>应用层 application layer，Telnet、SSH、FTP、SMTP、HTTP</li>
<li>MAC层的传输单位是帧（frame），IP层的传输单位是包（packet），TCP层的传输单位是段（segment），HTTP的传输单位是消息或报文（message）。统称为数据包</li>
<li>OSI网络分层模型<br> 1.第一层:物理层，网络的物理形式，例如电缆、光纤、网卡、集线器等等;<br> 2.第二层:数据链路层，它基本相当于TCP/IP的链接层;<br> 3.第三层:网络层，相当于TCP/IP里的网际层;<br> 4.第四层:传输层，相当于TCP/IP里的传输层;<br> 5.第五层:会话层，维护网络中的连接状态，即保持会话和同步;<br> 6.第六层:表示层，把数据转换为合适、可理解的语法和语义;<br> 7.第七层:应用层，面向具体的应用传输数据。</li>
<li>TCP/IP四层模型和OSI七层网络模型的映射关系<br>1.第一层:物理层，TCP/IP里无对应;<br>2.第二层:数据链路层，对应TCP/IP的链接层;<br>3.第三层:网络层，对应TCP/IP的网际层;<br>4.第四层:传输层，对应TCP/IP的传输层;<br>5.第五、六、七层:统一对应到TCP/IP的应用层。</li>
<li>*四层负载均衡：工作在传输层上，基于TCP/IP协议的特性，例如Ip地址，端口号等实现对后端服务器的负载均衡</li>
<li>*七层负载均衡：工作在应用层上，看到的是HTTP协议，解析HTTP报文里的URI、主机名、资源类型等数据，再用适当的策略转发给后端服务器</li>
</ol>
<h2 id="6-域名里的哪些门道？"><a href="#6-域名里的哪些门道？" class="headerlink" title="6. 域名里的哪些门道？"></a>6. 域名里的哪些门道？</h2><p><code>小结：</code></p>
<ol>
<li>域名使用字符串来代替 IP 地址，方便用户记忆，本质上一个名字空间系统；</li>
<li>DNS 就像是我们现实世界里的电话本、查号台，统管着互联网世界里的所有网站，是一个“超级大管家”；</li>
<li>DNS 是一个树状的分布式查询系统，但为了提高查询效率，外围有多级的缓存；</li>
<li>使用 DNS 可以实现基于域名的负载均衡，既可以在内网，也可以在外网。</li>
</ol>

          
            <div class='article_footer'>
              
                
  

  

  

  


              
            </div>
          
        </div>
        
          


  <section class='meta' id="footer-meta">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2021-05-11T21:42:55+08:00">
  <a class='notlink'>
    <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
    <p>更新于：2021-05-11</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/lemonelf/tags/HTTP/" rel="nofollow"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><p>HTTP</p></a></div>


        
      
        
          

        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/&title=HTTP 学习之旅 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=We make our own luck."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/&title=HTTP 学习之旅 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=We make our own luck."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://service.weibo.com/share/share.php?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/&title=HTTP 学习之旅 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=We make our own luck."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png">
          
        </a>
      
    
  </div>
</div>



        
      
    </div>
  </section>


        
        
          <div class="prev-next">
            
              <a class='prev' href='/lemonelf/2020/08/13/HTML%20%E8%AF%AD%E4%B9%89/'>
                <p class='title'><i class="fas fa-chevron-left" aria-hidden="true"></i>HTML 语义</p>
                <p class='content'>div 和 span 不是够用了么？
</p>
              </a>
            
            
              <a class='next' href='/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/'>
                <p class='title'>Grid 网格布局<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
                <p class='content'>Every obstacle is an opportunity.



Grid 网格布局


上图这样的布局，就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性...</p>
              </a>
            
          </div>
        
      </section>
    </article>
  




<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->


</div>
<aside class='l_side'>
  
  

  
    
    



  <section class="widget toc-wrapper shadow desktop mobile" id="toc-div" >
    
  <header>
    
      <i class="fas fa-list fa-fw" aria-hidden="true"></i><span class='name'>本文目录</span>
    
  </header>


    <div class='content'>
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-HTTP-%E7%9A%84%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F"><span class="toc-text">1. HTTP 的前世今生</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-HTTP-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">2. HTTP 是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E4%B8%8EHTTP%E7%9B%B8%E5%85%B3%E7%9A%84%E5%90%84%E7%A7%8D%E6%A6%82%E5%BF%B5"><span class="toc-text">3. 与HTTP相关的各种概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E4%B8%8EHTTP%E7%9B%B8%E5%85%B3%E7%9A%84%E5%90%84%E7%A7%8D%E5%8D%8F%E8%AE%AE"><span class="toc-text">4. 与HTTP相关的各种协议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E6%9C%89%E5%B1%82%E6%AC%A1%E7%9A%84%E5%8D%8F%E8%AE%AE%E6%A0%88"><span class="toc-text">5. 有层次的协议栈</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%9F%9F%E5%90%8D%E9%87%8C%E7%9A%84%E5%93%AA%E4%BA%9B%E9%97%A8%E9%81%93%EF%BC%9F"><span class="toc-text">6. 域名里的哪些门道？</span></a></li></ol>
    </div>
  </section>


  


</aside>



    </div>
    
  
  <footer class="clearfix">
    <br><br>
    
      
        <div class="aplayer-container">
          

  
    <meting-js
      theme='#1BCDFC'
      autoplay='false'
      volume='0.7'
      loop='all'
      order='list'
      fixed='false'
      list-max-height='320px'
      server='netease'
      type='playlist'
      id='3175833810'
      list-folded='true'>
    </meting-js>
  


        </div>
      
    
      
        <br>
        <div class="social-wrapper">
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-rss flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-envelope flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://gitee.com/MissGlobeFish"
                class="social fab fa-github flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://music.163.com/#/user/home?id=63035382"
                class="social fas fa-headphones-alt flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
        </div>
      
    
      
        <div><p>Blog content follows the <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License</a></p>
</div>
      
    
      
        Use
        <a href="https://volantis.js.org/" target="_blank" class="codename">Volantis</a>
        as theme, total visits
          <span id="busuanzi_value_site_pv"><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span>
          times
        
      
    
      
        <div class='copyright'>
        <p><a href="/">Copyright © 2017-2020 XXX</a></p>

        </div>
      
    
  </footer>


    <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
  </div>
  <div>
    
      
  

  <div id="rightmenu-wrapper">
    <ul class="list-v rightmenu" id="rightmenu-content">
      <li class='option'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-text' onclick='document.execCommand("copy")'><i class='fa fa-copy fa-fw'></i>Copy Text</a>
        <hr id='hr-text'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-href'><i class='fa fa-link fa-fw'></i>Copy Link</a>
        <a class='vlts-menu opt fix-cursor-default' id='menu-open-href'><i class='fa fa-external-link-square-alt fa-fw'></i>Open Link in New Tab</a>
        <hr id='hr-href'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-src'><i class='fa fa-image fa-fw'></i>Copy Image Link</a>
        <hr id='hr-src'>
      </li>
      <li class='navigation'>
        <a class='nav icon-only fix-cursor-default' onclick='history.back()'><i class='fa fa-arrow-left fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='history.forward()'><i class='fa fa-arrow-right fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='window.location.reload()'><i class='fa fa-redo fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' href='/'><i class='fa fa-home fa-fw'></i></a>
      </li>
      <hr>
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fas fa-envelope fa-fw'></i> 提出问题
      </a>
    </li>
  
        
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://missglobefish.github.io/
        
        
        
        
          id="https:missglobefishgithubio"
        >
        <i class='fa fa-fan fa-spin fa-fw'></i> 生活博客
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fa fa-code-branch fa-fw'></i> 本站源码
      </a>
    </li>
  
        
      
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' 
        
        
        
          onclick="document.execCommand('print')"
        
        >
        <i class='fa fa-print fa-fw'></i> 打印页面
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          <li class='music name'>
            <p class='nav music-title fix-cursor-default'></p>
          </li>
          <li class='music ctrl'>
            <a class='nav icon-only backward fix-cursor-default' onclick='aplayerBackward()'><i class='fa fa-step-backward fa-fw'></i></a>
            <a class='nav icon-only toggle fix-cursor-default' onclick='aplayerToggle()'><i class='fa fa-play fa-fw'></i></a>
            <a class='nav icon-only forward fix-cursor-default' onclick='aplayerForward()'><i class='fa fa-step-forward fa-fw'></i></a>
          </li>
          <li class='music volume'>
            <a class='nav volume'>
              <div class="aplayer-volume-bar-wrap">
                <div class="aplayer-volume-bar fix-cursor-pointer">
                  <div class="aplayer-volume"></div>
                  <i class='left fa fa-volume-off fa-fw'></i>
                  <i class='right fa fa-volume-up fa-fw'></i>
                </div>
              </div>
            </a>
          </li>
        
      
    </ul>
  </div>

  <script>
    window.document.oncontextmenu = function (event) {
      if (event.ctrlKey) return true;
      if (/Android|webOS|BlackBerry/i.test(navigator.userAgent)) return true;
      return popMenu(event);
    };
    document.addEventListener("click", function (event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      mymenu.style.display = "none";
    });
    function popMenu(event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      var menuContent = document.getElementById('rightmenu-content');
      var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
      mymenu.style.left = event.clientX + "px"; // 获取鼠标位置
      mymenu.style.top = event.clientY + "px";
      mymenu.style.display = 'block';
      if (event.clientX * 2 > screenWidth) {
        menuContent.classList.add('left');
      } else {
        menuContent.classList.remove('left');
      }
      if (event.clientY * 2 > screenHeight) {
        menuContent.classList.add('top');
      } else {
        menuContent.classList.remove('top');
      }

      let hrText = document.getElementById('hr-text');
      let hrSrc = document.getElementById('hr-src');
      let hrHref = document.getElementById('hr-href');

      // 选中图片
      let copySrc = document.getElementById('menu-copy-src');
      if (copySrc != undefined) {
        if (event.target.currentSrc) {
          copySrc.style.display = 'block';
          copySrc.addEventListener("click", function (e) {
            copyString(event.target.currentSrc);
          },{once: true});
          hrSrc.style.display = 'block';
        } else {
          copySrc.style.display = 'none';
          hrSrc.style.display = 'none';
        }
      }

      // 选中按钮
      // 判断是不是按钮
      let href = '';
      if (event.path) {
        for (i = 0; i < event.path.length; i++) {
          if (event.path[i].href != undefined && event.path[i].href.length > 0) {
            href = event.path[i].href;
          }
        }
      }

      let copyText = document.getElementById('menu-copy-text');
      copyText.style.display = 'none';
      hrText.style.display = 'none';
      if (href.length == 0) {
        // 选中文本
        if (window.getSelection().toString()) {
          copyText.style.display = 'block';
          hrText.style.display = 'block';
        }
      }

      // 在新标签页打开
      let openHref = document.getElementById('menu-open-href');
      if (openHref != undefined) {
        if (href.length > 0) {
          openHref.style.display = 'block';
          openHref.addEventListener("click", function (e) {
            window.open(href);
          },{once: true});
          hrHref.style.display = 'block';
        } else {
          openHref.style.display = 'none';
          hrHref.style.display = 'none';
        }
      }
      // 复制链接
      let copyHref = document.getElementById('menu-copy-href');
      if (copyHref != undefined) {
        if (href.length > 0) {
          copyHref.style.display = 'block';
          copyHref.addEventListener("click", function (e) {
            copyString(href);
          },{once: true});
        } else {
          copyHref.style.display = 'none';
        }
      }

      // 有音乐播放器
      if (true == true) {
        // 如果有aplayer，初始化一下
      	try {
      		checkAPlayer();
          updateTitle();
      	} catch (error) {
      		console.log(error);
      	}
      }

      return false; // 该行代码确保系统自带的右键菜单不会被调出
    }
    function hideMenu() {
      document.getElementById('rightmenu-wrapper').style.display = 'none';
    }
    function copyString(str) {
      const input = document.createElement('input');
      input.setAttribute('readonly', 'readonly');
      document.body.appendChild(input);
      input.setAttribute('value', str);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
    }
    document.execCommand('click');
  </script>


    
    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js"></script>



  <script>
    
    var SEARCH_SERVICE = "hexo" || "hexo";
    var ROOT = "/lemonelf/" || "/";
    if (!ROOT.endsWith('/')) ROOT += '/';
  </script>





  <script async src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>



  
  
  
    
<script src="https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js"></script>

    <script type="text/javascript">
      $(function(){
        var imgs=["https://gitee.com/wallpapers/minimalist/raw/master/2020/001.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/002.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/003.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/004.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/005.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/006.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/012.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/016.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/019.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/025.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/033.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/034.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/035.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/038.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/039.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/046.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/051.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/052.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/054.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/056.jpg"];
        if ('true' == 'true') {
          function shuffle(arr){
            /*From countercurrent-time*/
            var n = arr.length;
            while(n--) {
              var index = Math.floor(Math.random() * n);
              var temp = arr[index];
              arr[index] = arr[n];
              arr[n] = temp;
            }
          }
          shuffle(imgs);
        }
        if ('.cover') {
          $('.cover').backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        } else {
          $.backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        }
      });
    </script>
  



  <script>
    let APlayerController = new Object();
    APlayerController.id = '3175833810';  // 设定全局音乐播放ID
    APlayerController.volume = '0.7';
  </script>
  
    
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>

  
    
<script src="https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js"></script>

  




  
  
<script src="/lemonelf/js/valine.js"></script>


<script>
  var GUEST_INFO = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link'.split(',').filter(function (item) {
    return GUEST_INFO.indexOf(item) > -1
  });
  var REQUIRED_FIELDS = ['nick', 'mail', 'link'];
  var requiredFields = 'nick,mail'.split(',').filter(function (item) {
    return REQUIRED_FIELDS.indexOf(item) > -1
  });

  function emoji(path, idx, ext) {
    return path + "/" + path + "-" + idx + "." + ext;
  }

  var emojiMaps = {};
  for (var i = 1; i <= 54; i++) {
    emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
  }
  for (var i = 1; i <= 101; i++) {
    emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
  }
  for (var i = 1; i <= 116; i++) {
    emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
  }
  for (var i = 1; i <= 125; i++) {
    emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
  }
  for (var i = 1; i <= 4; i++) {
    emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
  }

  function pjax_valine() {
    var valinePath = $.trim($('#valine-path').text()) === "none" ?
            window.location.pathname : $.trim($('#valine-path').text());

    var valinePlaceholder = $.trim($('#valine-placeholder').text()) === "none" ?
            "快来评论吧~" : $.trim($('#valine-placeholder').text());

    var ALLPATH = '';
    if(ALLPATH != '') valinePath = ALLPATH;

    var valine = new Valine();
    valine.init({
      el: '#valine_container',
      meta: meta,
      placeholder: valinePlaceholder,
      path: valinePath,
      appId: "",
      appKey: "",
      pageSize: '10',
      avatar: 'robohash',
      lang: 'zh-cn',
      visitor: 'true',
      highlight: 'true',
      mathJax: 'false',
      enableQQ: 'true',
      requiredFields: requiredFields,
      emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
      emojiMaps: emojiMaps
    })
  }

  $(function () {
    pjax_valine();
  });
</script>




<!-- darkmodejs -->


<!-- 复制 -->

  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
    var clipboard = new ClipboardJS('.btn-copy', {
        target: function (trigger) {
            return trigger.nextElementSibling
        }
    });
    function wait(callback, seconds) {
        var timelag = null;
        timelag = window.setTimeout(callback, seconds)
    }
    function pjax_initCopyCode() {
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '<i class="fas fa-copy"></i><span>COPY</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        $(".article pre code").before(copyHtml);
        clipboard.off('success').on('success', function (e) {
            let $btn = $(e.trigger);
            $btn.addClass('copied');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-check-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPIED';
            wait(function () {
                $icon.removeClass('fa-check-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        });
        clipboard.off('error').on('error', function (e) {
            e.clearSelection();
            let $btn = $(e.trigger);
            $btn.addClass('copy-failed');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-times-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPY FAILED';
            wait(function () {
                $icon.removeClass('fa-times-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        })
    }
    $(function () {
        pjax_initCopyCode()
    });
</script>


<!-- scrollreveal -->

<!-- ******************************** -->

<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  function pjax_fancybox() {
    $(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
      var element = document.createElement("a"); // a 标签
      $(element).attr("class", "fancybox");
      $(element).attr("pjax-fancybox", "");  // 过滤 pjax
      $(element).attr("href", $(this).attr("src"));
      if ($(this).attr("data-original")) {
        $(element).attr("href", $(this).attr("data-original"));
      }
      $(element).attr("data-fancybox", "images");
      var caption = "";   // 描述信息
      if ($(this).attr('alt')) {  // 判断当前页面是否存在描述信息
        $(element).attr('data-caption', $(this).attr('alt'));
        caption = $(this).attr('alt');
      }
      var div = document.createElement("div");
      $(div).addClass("fancybox");
      $(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式
      var span = document.createElement("span");
      $(span).addClass("image-caption");
      $(span).text(caption); // 加描述
      $(this).after(span);  // 再套一层描述
      $(this).wrap(element);  // 最后套 a 标签
    })
    $(".article-entry").find("img").fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
      closeClick: true,
      helpers: {
        overlay: {closeClick: true}
      },
      buttons: [
        "zoom",
        "close"
      ]
    });
  };
  $(function () {
    pjax_fancybox();
  });
</script>

<!-- ******************************** -->


  
<script src="/lemonelf/js/app.js"></script>




  
    
<script src="/lemonelf/js/search.js"></script>

  



  <script defer src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js" data-pjax></script>



  
<script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>

  <script type="text/javascript">
    $(function () {
      Waves.attach('.flat-btn', ['waves-button']);
      Waves.attach('.float-btn', ['waves-button', 'waves-float']);
      Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']);
      Waves.attach('.flat-box', ['waves-block']);
      Waves.attach('.float-box', ['waves-block', 'waves-float']);
      Waves.attach('.waves-image');
      Waves.init();
    });
  </script>



  
<script src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js"></script>







    
      


<script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js"></script>

<!-- 样式位于：source/css/_third-party/pjaxanimate.styl -->

<div class="pjax-animate">
  
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <div id="loading-bar-wrapper"><script>NProgress.configure({parent:"#loading-bar-wrapper",trickleSpeed: 100})</script></div>
    <script>
      window.ShowLoading = function() {
        NProgress.start();
      };
      window.HideLoading = function() {
        NProgress.done();
      }
    </script>
  
</div>

<script>
    var pjax;
    document.addEventListener('DOMContentLoaded', function () {
      pjax = new Pjax({
        elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox])',
        selectors: [
          "title",
          "#pjax-container",
          "#pjax-header-nav-list"
        ],
        cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
        timeout: 5000
      });
    });

    document.addEventListener('pjax:send', function (e) {
      window.stop(); // 相当于点击了浏览器的停止按钮

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      window.subData = null; // 移除标题（用于一二级导航栏切换处）
      $.fancybox.close();    // 关闭弹窗
      $('.nav-main').find('.list-v').not('.menu-phone').css("display","none"); // 移除小尾巴
      $('.menu-phone.list-v').css("display","none"); // 移除小尾巴
      $('.l_header .switcher .s-search').removeClass('active'); // 关闭移动端激活的搜索框
      $('.l_header').removeClass('z_search-open'); // 关闭移动端激活的搜索框
      $('.wrapper').removeClass('sub'); // 跳转页面时关闭二级导航

      $('.s-top').unbind('click');   // 解绑
      $('.menu a').unbind('click');  // 解绑
      $(window).unbind('resize');    // 解绑
      $(window).unbind('scroll');    // 解绑
      $(document).unbind('scroll');  // 解绑
      $(document).unbind('click');   // 解绑
      $('body').unbind('click');     // 解绑
      window.ShowLoading();
    });

    document.addEventListener('pjax:complete', function () {
      // 关于百度统计对 SPA 页面的处理：
      // 方案一：百度统计>管理>单页应用设置中，打开开启按钮即可对SPA进行统计。 https://tongji.baidu.com/web/help/article?id=324
      // 方案二：取消注释下列代码。 https://tongji.baidu.com/web/help/article?id=235
      // 

      // 关于谷歌统计对 SPA 页面的处理：
      // 当应用以动态方式加载内容并更新地址栏中的网址时，也应该更新通过 gtag.js 存储的网页网址。
      // https://developers.google.cn/analytics/devguides/collection/gtagjs/single-page-applications?hl=zh-cn
      

      $('.nav-main').find('.list-v').not('.menu-phone').removeAttr("style",""); // 移除小尾巴的移除
      $('.menu-phone.list-v').removeAttr("style",""); // 移除小尾巴的移除
      $('script[data-pjax], .pjax-reload script').each(function () {
        $(this).parent().append($(this).remove());
      });

      try{
        pjax_fancybox();
        
          
          if ('.cover') {
            $('.cover').backstretch("resize");
          } else {
            $.backstretch("resize");
          }
        
        
        
        
          pjax_initCopyCode();
        
        
          pjax_valine();
        
        
        
        
        
      } catch (e) {
        console.log(e);
      }
      window.HideLoading();
    });

    document.addEventListener('pjax:error', function (e) {
      window.HideLoading();
      window.location.href = e.triggerElement.href;
    });
</script>

    
  </div>
</body>
</html>
